<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Fx</title>
		<script src="../../py/system.js" type="text/javascript"></script>
		<script src="../../py/system/dom/element.js" type="text/javascript"></script>
		<script src="../../py/system/fx/base.js" type="text/javascript"></script>
		<script src="../../py/system/fx/animate.js" type="text/javascript"></script>
		<script src="../../py/system/fx/transitions.js" type="text/javascript"></script>
		
		<script src="../../common/project/project.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/default.js" type="text/javascript"></script>
		<script src="../../common/assets/scripts/debug.js" type="text/javascript"></script>
		<style>
			
			
			.p {
				height: 3px;
				position: absolute;
				width: 3px;
				background: black;
			}
			
		</style>
		
		
		
	</head>
	<body> 
		<div style="position:absolute; border-top: 1px solid purple; border-bottom: 1px solid purple" id="v"></div>
		
		<div id="b"></div>
		<div style=" border: 1px solid purple ; position: relative; height:20px;" id="t">
			<div style="position: absolute; width: 20px ; left: 0px; top: 0px; height: 20px;  background: black;"  id="f"></div>
		</div>
			<hr>
			
		
		<script>
			
			var width = 300,
				duration = 3500,
				fps = 100;
				
			$('v').setHeight(width);
			$('b').setHeight(width);
			$('t').setWidth(width + 20);
			
			var Trans =     Fx.Base.extend({
				
				link:  'ignore' ,
				
				fps: fps,
				
				duration: duration,
				
				set: function(delta){
					this.x++;
					var y = Fx.compute(this.from, this.to, delta);
					this.y = width - y;
					
					document.create('div',  'p').renderTo('v').setOffset(this);
					
					$('f').style.left = y +  'px' ;
				},
				
				start: function () {
				 
				 	arguments.length = 5;
					arguments[4] = function() {
						 $('v') .empty();
						this.x = 0;
					}
					
					
					this.base('start', arguments);
				}
				
			});
		
			
			var f =  new  Trans();
			
			for(var i in Py.Fx.Transitions) {
				if(/^ease/.test(i))
					break;
				document.write('<input type="button" onclick="f.transition = Transitions.' + i + ';  f.start(0, ' + width + ');" value="' + i + '">');
				document.write('<input type="button" onclick="f.transition = Transitions.easeOut(Transitions.' + i + ');   f.start(0, ' + width + ');" value="easeOut( ' + i + ' )">');
				document.write('<input type="button" onclick="f.transition = Transitions.easeInOut(Transitions.' + i + ');   f.start(0, ' + width + ');" value="easeInOut( ' + i + ' )">');
				document.write('<p />');
			}
			
		</script>
	</body>
</html>